<template>
  <div class="container">
    <el-card class="box-card">
      <h1 slot="header" class="card-title">卡牌种类详情</h1>
      <div v-if="card">
        <el-descriptions title="卡牌信息" border>
          <el-descriptions-item label="卡密">{{ card.keyword }}</el-descriptions-item>
          <el-descriptions-item label="卡牌名称">{{ card.cardname }}</el-descriptions-item>
          <el-descriptions-item label="罕贵度">{{ card.rarity }}</el-descriptions-item>
          <el-descriptions-item label="来源">{{ card.origin || '-' }}</el-descriptions-item>
          <el-descriptions-item label="卡盒批次">{{ card.batch || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else class="loading">
        <el-empty description="卡牌信息加载中..."></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getAllCardmates } from '@/api/Cardmate'
import { ElMessage } from 'element-plus'

const route = useRoute()
const cardId = route.params.id
const card = ref(null)
console.log(cardId);

const fetchCard = async () => {  
  try {
    const response = await getAllCardmates()
    console.log(response.data.data)
    const cards = response.data.data 
    card.value = cards.find(c => Number(c.id) === Number(cardId))
    console.log('找到的卡牌:', card.value)
  } catch (error) {
    console.error('加载数据失败：', error.message)
    ElMessage.error('加载数据失败：' + error.message)
  }
}

watch(() => route.params.id, (newId) => {
  if (newId) {
    fetchCard()
  }
}, { immediate: true })
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.card-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.loading {
  text-align: center;
  padding: 20px;
}
</style>
